<template>
  <div class="dashboard">
    <h3>系统概览</h3>
    <el-row :gutter="20">
      <el-col :span="6">
        <StatCard title="总用户数" :value="stats.totalUsers" icon="user" color="#409EFF"/>
      </el-col>
      <el-col :span="6">
        <StatCard title="教师数量" :value="stats.teachers" icon="teacher" color="#67C23A"/>
      </el-col>
      <el-col :span="6">
        <StatCard title="学生数量" :value="stats.students" icon="student" color="#E6A23C"/>
      </el-col>
      <el-col :span="6">
        <StatCard title="待审内容" :value="stats.pending" icon="warning" color="#F56C6C"/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import StatCard from './StatCard.vue' // 引入 StatCard 组件

const stats = ref({
  totalUsers: 1024,
  teachers: 23,
  students: 1001,
  pending: 5
})
</script>

<style scoped>
.dashboard {
  padding: 24px;
}
</style>